<template>
  <div class="login-container">
    <!-- 登录 -->
    <div class="login-wrap">
      <div class="login">

        <div class="loginform">
          <ul class="tab clearFix">
            <li>
              <a href="##" class="current">账户登录</a>
            </li>
          </ul>

          <div class="content">
            <form :model="user" >
              <div class="input-text clearFix">
                <span></span>
                <span>邮箱：</span><input type="text" v-model="user.email" placeholder="邮箱">
              </div>
              <div class="input-text clearFix">
                <span class="pwd"></span>
                <span>密码：</span><input type="password" v-model="user.password"   placeholder="请输入密码">
              </div>
              <div class="setting ">
                <label class="checkbox inline">
                  <input name="m1" type="checkbox" value="2" checked="">
                  自动登录
                </label>
                <span class="forget">忘记密码？</span>
              </div>
              <p class="my_loginMes">{{ loginMes }}</p>
              <button class="btn"  @click="myLogin()" >登&nbsp;&nbsp;录</button>
            </form>

            <div class="call clearFix">
              <router-link class="register" to="/register">立即注册</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
 
  </div>
</template>

<script>
import myhomeapi from "@/api/myhome";
  export default {
    name: 'Login',

    data(){
      return{
          user:{
              email:'',
              password:''
          },
          loginMes:'',
      }
  
    },
    methods:{
      //登录
      myLogin(){

        localStorage.setItem("satoken",null)
        localStorage.removeItem("satoken")
      
        myhomeapi.handleLogin(this.user).then(res=>{
          alert("登录成功")
          if(res.data.tokenValue!=null){
            localStorage.setItem("satoken",res.data.tokenValue)
          }
      
          // 成功
          // this.$router.push('/home')
          this.$router.go(-1)

        }).catch(error=>{
          alert("账户密码不对")
          this.loginMes="邮件或者密码不正确"
        })

      }
    }


  }
</script>

<style lang="less" scoped>
.login-container{
  // width: 1400px;
  height: 600px;
  
  background: url('./images/bg.png');
  background-size:cover;
}

.login{
  width: 20%;
      height: 400px;
      background-color: #486a9960;
      margin: auto;
      
      text-align: center;
      border-radius: 10px;
      padding: 50px 50px;
}
//账户登录
.current{
  font-size: 20px;
  color: #1105f990;
  margin-top: 5%;
}

.clearFix{
  margin-top: 5%;
  font-size: 16px;
  color: #242327;
  
}
.input-text input {
      border: 0;
      width: 60%;
      font-size: 15px;
      color: #fff;
      background: transparent;
      border-bottom: 2px solid #fff;
      padding: 5px 10px;
      outline: none;
      margin-top: 10px;
    }

    button {
      margin-top: 20px;
      width: 60%;
      height: 30px;
      border-radius: 10px;
      border: 0;
      color: #fff;
      text-align: center;
      line-height: 30px;
      font-size: 15px;
      background-image: linear-gradient(to right, #30cfd0, #330867);
    }
.setting{
  font-size: 13px;
  margin-top:8%;
  color: #ededee;
}
.register{
  color: #decdf4;
}
.my_loginMes{
  color: red;
  font-size: 20px;
}
</style>